/**
 * @file _axiom-loading.scss
 * @description 加载组件样式定义
 */

.axiom-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--axiom-loading-gap, 12px);

  // 遮罩层模式
  &.axiom-loading--overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--axiom-loading-overlay-bg, rgba(0, 0, 0, 0.3));
    backdrop-filter: blur(var(--axiom-loading-overlay-blur, 2px));
    -webkit-backdrop-filter: blur(var(--axiom-loading-overlay-blur, 2px));
    z-index: var(--axiom-loading-z-index, 9999);
  }

  // 尺寸变体
  &.axiom-loading--small {
    .axiom-loading__icon {
      width: var(--axiom-loading-sm-icon-width, 20px);
      height: var(--axiom-loading-sm-icon-height, 20px);
      font-size: var(--axiom-loading-sm-icon-font-size, 14px);
    }

    .axiom-loading__text {
      font-size: var(--axiom-loading-sm-text-font-size, 12px);
    }
  }

  &.axiom-loading--large {
    .axiom-loading__icon {
      width: var(--axiom-loading-lg-icon-width, 48px);
      height: var(--axiom-loading-lg-icon-height, 48px);
      font-size: var(--axiom-loading-lg-icon-font-size, 24px);
    }

    .axiom-loading__text {
      font-size: var(--axiom-loading-lg-text-font-size, 16px);
    }
  }

  // 加载图标容器
  .axiom-loading__icon {
    width: var(--axiom-loading-icon-width, 32px);
    height: var(--axiom-loading-icon-height, 32px);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color);
    font-size: var(--axiom-loading-icon-font-size, 18px);
  }

  // 加载文本
  .axiom-loading__text {
    color: var(--text-color-secondary);
    font-size: var(--axiom-loading-text-font-size, 14px);
    text-align: center;
  }
}

// 旋转加载器
.axiom-loading__spin {
  i {
    animation: spin 1s linear infinite;
  }
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

// 点状加载器
.axiom-loading__dots {
  display: flex;
  gap: var(--axiom-loading-dots-gap, 4px);

  span {
    width: var(--axiom-loading-dots-size, 6px);
    height: var(--axiom-loading-dots-size, 6px);
    border-radius: 50%;
    background-color: var(--primary-color);
    animation: dots 1.4s ease-in-out infinite both;

    &:nth-child(1) {
      animation-delay: -0.32s;
    }

    &:nth-child(2) {
      animation-delay: -0.16s;
    }
  }
}

@keyframes dots {
  0%, 80%, 100% {
    transform: scale(0);
    opacity: 0.5;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}

// 脉冲加载器
.axiom-loading__pulse {
  display: flex;
  gap: var(--axiom-loading-pulse-gap, 3px);

  div {
    width: var(--axiom-loading-pulse-width, 4px);
    height: var(--axiom-loading-pulse-height, 20px);
    background-color: var(--primary-color);
    border-radius: var(--axiom-loading-pulse-radius, 2px);
    animation: pulse 1.2s ease-in-out infinite;

    &:nth-child(1) {
      animation-delay: -0.4s;
    }

    &:nth-child(2) {
      animation-delay: -0.2s;
    }

    &:nth-child(3) {
      animation-delay: 0s;
    }
  }
}

@keyframes pulse {
  0%, 40%, 100% {
    transform: scaleY(0.4);
    opacity: 0.5;
  }
  20% {
    transform: scaleY(1);
    opacity: 1;
  }
}

// 条形加载器
.axiom-loading__bars {
  display: flex;
  gap: var(--axiom-loading-bars-gap, 2px);

  span {
    width: var(--axiom-loading-bars-width, 3px);
    height: var(--axiom-loading-bars-height, 16px);
    background-color: var(--primary-color);
    border-radius: var(--axiom-loading-bars-radius, 1px);
    animation: bars 1s ease-in-out infinite;

    &:nth-child(1) {
      animation-delay: -0.4s;
    }

    &:nth-child(2) {
      animation-delay: -0.3s;
    }

    &:nth-child(3) {
      animation-delay: -0.2s;
    }

    &:nth-child(4) {
      animation-delay: -0.1s;
    }
  }
}

@keyframes bars {
  0%, 40%, 100% {
    transform: scaleY(0.4);
  }
  20% {
    transform: scaleY(1);
  }
} 